<template>
	<view>
		<view class="tabs-box">
			<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabsChange" ></u-tabs>
		</view>

		<view v-show="current ==0">
			<shopro-topic-list :list="hotsList" :loadStatus="loadStatus"></shopro-topic-list>
		</view>
		<view v-show="current ==1">
			<shopro-topic-list :list="topicList" :loadStatus="loadStatus"></shopro-topic-list>
		</view>
		<!-- 发布按钮-->
		<navigator url="/pages/topic/topic-push" class="post-box">
			<u-icon color="#fff" name="plus"></u-icon>
		</navigator>
        <shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	/**
	 * 社区首页
	 */
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				current: 1,
				tabList: [{
					name: '关注'
				}, {
					name: '首页'
				}],
				hotsList: [],
				topicList: [],
				isLoading: true,
				loadStatus: 'loadmore', //loadmore:加载前的状态，loading:加载中的状态，nomore:没有更多的状态
				lastPage: 1,
				currentPage: 1,
				grouponList: [],
				imgList: []
			

			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				userData: ({
					user
				}) => user.userData
			})
		},
		onLoad() {
			this.getTopicHots();
			this.getTopicList();
		},
		onReachBottom() {
			this.loadMore();
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.lastPage = 1;
			this.topicList = [];
			this.hotsList = [];
			this.getTopicList();
			this.getTopicHots();
		},
		methods: {
			//切换事件
			tabsChange(index) {
				this.current = index;
				this.getTopicList();
				this.getTopicHots();
			},
			//关注列表
			getTopicHots() {
				let that = this;
				that.isLoading = true;
				that.loadStatus = 'loading';
				that.$http('topic.topicHotlist', {
					page: that.currentPage
				}).then(res => {
					that.isLoading = false;
					uni.stopPullDownRefresh();
					if (res.code === 1) {
						that.hotsList = [...that.hotsList, ...res.data.list];
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
		    //首页信息
			getTopicList() {
				let that = this;
				that.isLoading = true;
				that.loadStatus = 'loading';
				that.$http('topic.topiclist', {
					page: that.currentPage
				}).then(res => {
					that.isLoading = false;
					uni.stopPullDownRefresh();
					if (res.code === 1) {
						that.topicList = [...that.topicList, ...res.data.data];
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getTopicList();
					this.getTopicHots();
				}
			},
			//路由跳转
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}
		}
	};
</script>

<style>
	/*发布按钮*/
	.post-box {
		background-color: #2979ff;
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 160rpx;
		right: 50rpx;
		z-index: 999;
		box-shadow: 0 0 10rpx #333;
	}
</style>
